<template>
	<div v-if="parent.requiresField(namePrefix + '.document')">
		<!--
		It only has a details_code if it failed to verify.
	-->
		<div
			v-if="
				!parent.getStripeField(namePrefix + '.document') ||
					parent.getStripeField(namePrefix + '.details_code')
			"
		>
			<hr />

			<div class="alert" v-if="parent.getStripeField(namePrefix + '.details')">
				<app-jolticon icon="notice" />
				{{ parent.getStripeField(namePrefix + '.details') }}
			</div>

			<app-form-group :name="`${namePrefix}.document`" :label="$gettext('ID Document')">
				<p class="help-block">
					<translate>
						This should be a scan of an ID card, driver's license, passport, or other government
						supplied identification.
					</translate>
					<em>
						<translate>Only .png or .jpg is accepted and it must be smaller than 8MB.</translate>
					</em>
				</p>
				<app-form-control-upload
					ref="document-input"
					:rules="{
						filesize: 8 * 1024 * 1024,
					}"
					accept=".png,.jpg,.jpeg"
				/>
				<app-form-control-errors />
			</app-form-group>
		</div>

		<div
			v-if="
				parent.getStripeField(namePrefix + '.document') &&
					!parent.getStripeField(namePrefix + '.details_code')
			"
			class="form-horizontal"
		>
			<div class="form-group">
				<label class="control-label col-sm-4">
					<translate>ID Document</translate>
				</label>
				<div class="form-static col-sm-8">
					<translate>Provided</translate>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" src="./id-document"></script>
